<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Get Voters List On Post | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Get Voters List On Post" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="By the end of this tutorial you would know how to get voters list on any content." />
<meta property="og:description" content="By the end of this tutorial you would know how to get voters list on any content." />
<link rel="canonical" href="get_voters_list_on_post.html" />
<meta property="og:url" content="get_voters_list_on_post.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"By the end of this tutorial you would know how to get voters list on any content.","mainEntityOfPage":{"@type":"WebPage","@id":"get_voters_list_on_post.html"},"@type":"BlogPosting","url":"get_voters_list_on_post.html","headline":"JS: Get Voters List On Post","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-get-voters-list-on-post" class="row tutorials-javascript-get-voters-list-on-post">
	<h3>
		<a id="tutorials-javascript-get-voters-list-on-post">
			JS: Get Voters List On Post
			
		</a>
	</h3>
	
		<span class="description"><p><em>By the end of this tutorial you would know how to get voters list on any content.</em></p>
</span>
	

	<p>Full, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/06_get_voters_list_on_post">Get Voters List On Post</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a> (or download just this tutorial: <a href="https://gitlab.syncad.com/hive/devportal/-/archive/master/devportal-master.zip?path=tutorials/javascript/06_get_voters_list_on_post">devportal-master-tutorials-javascript-06_get_voters_list_on_post.zip</a>).</p>

<p>The purpose of this tutorial is to <strong>a)</strong> demonstrate how to get a list of articles from the trending list on the blockchain, and <strong>b)</strong> fetch the voters of the selected post to display the account and date at which they voted.</p>

<p>We will also explain the most commonly used fields from the response object.</p>

<h2 id="intro">Intro</h2>

<p>Each post has voters that support content and play big role in reward distribution. Getting details of each voter and their vote value, time, etc. is another crucial information for authors and app developers. We will be using <code class="highlighter-rouge">get_active_votes</code> API call to retrieve that information right from Hive blockchain.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#fetching-posts"><strong>Fetching posts</strong></a> Get trending post list</li>
  <li><a href="#voter-info"><strong>Voter information</strong></a> Voters information on selected post</li>
  <li><a href="#query-result"><strong>Query result</strong></a> Example of result from query</li>
</ol>

<h4 id="1-fetching-posts">1. Fetching posts<a name="fetching-posts"></a></h4>

<p>As mentioned in our previous tutorial we can fetch various lists of posts with different filters. Here, we are reusing some parts of that tutorial to list the top 5 trending posts.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">tag</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span> <span class="c1">// This tag is used to filter the results by a specific post tag.</span>
    <span class="na">limit</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="c1">// This allows us to limit the total to 5 items.</span>
    <span class="na">truncate_body</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// This will truncate the body of each post to 1 character, which is useful if you want to work with lighter array.</span>
<span class="p">};</span>
</code></pre></div></div>

<h4 id="2-voter-information">2. Voter information<a name="voter-info"></a></h4>

<p>On selection of a particular post from the list, <code class="highlighter-rouge">openPost</code> function is fired. This function will call the <code class="highlighter-rouge">get_active_votes</code> function to fetch the voters of the post. <code class="highlighter-rouge">get_active_votes</code> requires author and permlink of the post to fetch its data.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="dl">'</span><span class="s1">get_active_votes</span><span class="dl">'</span><span class="p">,</span> <span class="p">[</span><span class="nx">author</span><span class="p">,</span> <span class="nx">permlink</span><span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">votes</span><span class="dl">'</span><span class="p">,</span> <span class="nx">result</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">result</span><span class="p">));</span>

    <span class="kd">var</span> <span class="nx">voters</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="nx">voters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span>
        <span class="s2">`&lt;div class='pull-right'&gt;&lt;button onclick=goback()&gt;Close&lt;/button&gt;&lt;/div&gt;&lt;br&gt;`</span>
    <span class="p">);</span>
    <span class="nx">result</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">voter</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">voter</span><span class="p">.</span><span class="nx">voter</span><span class="p">;</span>
        <span class="kd">const</span> <span class="nx">time</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">voter</span><span class="p">.</span><span class="nx">time</span><span class="p">).</span><span class="nx">toDateString</span><span class="p">();</span>
        <span class="nx">voters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2"> (</span><span class="p">${</span><span class="nx">time</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
    <span class="p">});</span>

    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postList</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postBody</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postBody</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">voters</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">'</span><span class="s1">&lt;li&gt;</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postList</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postBody</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div></div>

<p>The “go back” function simply hides and shows the post list.</p>

<h4 id="3-query-result">3. Query result<a name="query-result"></a></h4>

<p>The result is returned from the post content as a <code class="highlighter-rouge">JSON</code> object with the following properties:</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w">
        </span><span class="nl">"voter"</span><span class="p">:</span><span class="w"> </span><span class="s2">"gekko"</span><span class="p">,</span><span class="w">
        </span><span class="nl">"weight"</span><span class="p">:</span><span class="w"> </span><span class="mi">157</span><span class="p">,</span><span class="w">
        </span><span class="nl">"rshares"</span><span class="p">:</span><span class="w"> </span><span class="mi">2626899959</span><span class="p">,</span><span class="w">
        </span><span class="nl">"percent"</span><span class="p">:</span><span class="w"> </span><span class="mi">10000</span><span class="p">,</span><span class="w">
        </span><span class="nl">"reputation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1185517433922"</span><span class="p">,</span><span class="w">
        </span><span class="nl">"time"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2018-05-08T07:16:09"</span><span class="w">
    </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w">
        </span><span class="nl">"voter"</span><span class="p">:</span><span class="w"> </span><span class="s2">"embat"</span><span class="p">,</span><span class="w">
        </span><span class="nl">"weight"</span><span class="p">:</span><span class="w"> </span><span class="mi">154</span><span class="p">,</span><span class="w">
        </span><span class="nl">"rshares"</span><span class="p">:</span><span class="w"> </span><span class="mi">2578364521</span><span class="p">,</span><span class="w">
        </span><span class="nl">"percent"</span><span class="p">:</span><span class="w"> </span><span class="mi">10000</span><span class="p">,</span><span class="w">
        </span><span class="nl">"reputation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"161340267374"</span><span class="p">,</span><span class="w">
        </span><span class="nl">"time"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2018-05-08T07:38:24"</span><span class="w">
    </span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span></code></pre></div></div>

<p>From this result, you have access to everything associated with the selected post, including additional metadata which is a <code class="highlighter-rouge">JSON</code> string that must be decoded to use.</p>

<ul>
  <li><code class="highlighter-rouge">voter</code> - The author account name of the vote.</li>
  <li><code class="highlighter-rouge">weight</code> - Weight of the voting power.</li>
  <li><code class="highlighter-rouge">rshares</code> - Reward shares.</li>
  <li><code class="highlighter-rouge">percent</code> - Percent of vote.</li>
  <li><code class="highlighter-rouge">reputation</code> - The <a href="https://developers.hive.io/glossary/#reputation">reputation</a> of the account that voted.</li>
  <li><code class="highlighter-rouge">time</code> - Time the vote was submitted.</li>
</ul>

<h3 id="to-run-the-tutorial">To Run the tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/06_get_voters_list_on_post</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

